<template>
    <el-form :model="form" label-width="120px" ref="addForm">
        <el-form-item label="所属门店" prop="shopId">
            <el-select v-model="form.shopId" placeholder="please select your zone" style="width: 500px;">
                <el-option label="不选择" value="" />
                <el-option :label="item.name" v-for="item in shop" :key="item.id" value="item.id" />
            </el-select>
            <span style="color: orange;margin-left: 15px;">没有多店铺的不需要选择</span>
        </el-form-item>
        <el-form-item label="商品分类" prop="categoryId" style="width: 500px;" :rules="rules">
            <el-select v-model="form.categoryId" placeholder="please select your zone">
                <el-option label="不选择" value="" />
                <el-option :label="item.name" v-for="item in goods" :value="item.id" />
            </el-select>
        </el-form-item>
        <el-form-item label="商品条码" prop="barCode">
            <el-input v-model="form.barCode" style="width: 500px;" />
            <span style="color: orange;margin-left: 15px;">建议配合扫码枪使用</span>
        </el-form-item>
        <el-form-item label="商品名称" prop="name" :rules="rules">
            <el-input v-model="form.name" style="width: 800px;" />
        </el-form-item>
        <el-form-item label="别名" prop="subName">
            <el-input v-model="form.subName" style="width: 500px;" />
        </el-form-item>
        <el-form-item label="商品类型" prop="type">
            <el-radio-group v-model="form.type">
                <el-radio label="0">实物商品</el-radio>
                <el-radio label="1">虚拟商品</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="海外直邮" prop="overseas" :rules="rules">
            <el-radio-group v-model="form.overseas">
                <el-radio label="true">支持</el-radio>
                <el-radio label="false">不支持</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="标签（关键词）" prop="tags">
            <el-input v-model="form.tags" style="width: 500px;" />
            <span style="color: orange;margin-left: 15px;"> 多个标签用英文逗号隔开</span>
        </el-form-item>
        <el-form-item label="购买须知" prop="purchaseNotes">
            <el-input v-model="form.purchaseNotes" type="textarea" :rows="4" />
            <span style="color: orange;">最多500个，按需填写</span>
        </el-form-item>
        <el-form-item label="商品特色" prop="characteristic">
            <el-input v-model="form.characteristic" type="textarea" :rows="4" />
            <span style="color: orange;">最多500个</span>
        </el-form-item>
        <el-form-item label="选择物流模板" prop="logisticsId">
            <el-select v-model="form.logisticsId" placeholder="please select your zone" style="width: 500px;">
                <el-option label="不使用物流" value="" />
                <el-option label="Zone two" value="beijing" />
            </el-select>
            <span style="color: orange;margin-left: 15px;"> 虚拟物品等不需要快递（不需要用户填写收货地址）的商品请选择不需要物流</span>
        </el-form-item>
        <el-form-item label="优惠券" prop="maxCoupons" :rules="rules">
            <el-input v-model="form.maxCoupons" style="width: 300px;" />
            <span style="color: orange;margin-left: 15px;">最多可使用几张优惠券</span>
        </el-form-item>
        <el-form-item label="排序" prop="paixu">
            <el-input v-model="form.paixu" style="width: 300px;" />
        </el-form-item>
        <el-form-item label="是否推荐" prop="recommendStatus">
            <el-radio-group v-model="form.recommendStatus">
                <el-radio label="0">不推荐</el-radio>
                <el-radio label="1">推荐</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="是否展示" prop="hidden">
            <el-radio-group v-model="form.hidden">
                <el-radio label="0">正常展示</el-radio>
                <el-radio label="1">默认隐藏，不在前端显示</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="是否售后" prop="afterSale1">
            <el-checkbox-group v-model="form.afterSale1">
                <el-checkbox label="0" name="type">仅退款</el-checkbox>
                <el-checkbox label="1" name="type">退款退货</el-checkbox>
                <el-checkbox label="2" name="type">退款退货</el-checkbox>
            </el-checkbox-group>
            <span style="color: red;margin-left: 15px;">都不勾选代表本商品不支持售后</span>
        </el-form-item>
        <el-form-item label="上架状态" prop="status" :rules="rules">
            <el-radio-group v-model="form.status">
                <el-radio label="0">上架</el-radio>
                <el-radio label="1">下架</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="视频编号" prop="videoId">
            <el-input v-model="form.videoId" style="width: 500px;" />
            <span style="color: orange;margin-left: 15px;">都不勾选代表本商品不支持售后</span>
        </el-form-item>
        <el-form-item label="图片" :rules="rules" prop="pics">
            <el-upload class="avatar-uploader" action="" :auto-upload="false" :show-file-list="false"
                :on-change="handleChange">
                <img style="width:100px;" v-if="form.pics" :src="form.pics" class="avatar" />
                <el-button v-else type="warning">上传图片</el-button>
            </el-upload>
        </el-form-item>
        <el-form-item label="详细介绍" :rules="rules" prop="content">
            <Tinymce v-model="form.content" style="width:100%;"></Tinymce>
        </el-form-item>
        <el-form-item label="单位" prop="unit">
            <el-input v-model="form.unit" style="width: 300px;" />
            <span style="color: orange;margin-left: 15px;"> 比如: 份/瓶/箱/斤</span>
        </el-form-item>
        <el-form-item label="市场价" :rules="rules" prop="originalPrice">
            <el-input v-model="form.originalPrice" style="width: 300px;" />
        </el-form-item>
        <el-form-item label="现价" :rules="rules" prop="minPrice">
            <el-input v-model="form.minPrice" style="width: 300px;" />
        </el-form-item>
        <el-form-item label="需要积分" :rules="rules" prop="minScore">
            <el-input v-model="form.minScore" style="width: 300px;" />
            <span style="color: orange;margin-left: 15px;">购买需要扣除用户的积分数量</span>
        </el-form-item>
        <el-form-item label="赠送积分" :rules="rules" prop="gotScore">
            <el-input v-model="form.gotScore" style="width: 300px;" />
            <el-select placeholder="please select your zone">
                <el-option label="固定数量积分" value="" />
                <el-option label="金额的百分比(%)" value="" />
            </el-select>
            <span style="color: orange;margin-left: 15px;">购买后用户可获得的积分数量</span>
        </el-form-item>
        <el-form-item label="最少购买" :rules="rules" prop="minBuyNumber">
            <el-input v-model="form.minBuyNumber" style="width: 300px;">
                <template #append>份</template>
            </el-input>
        </el-form-item>
        <el-form-item label="库存" :rules="rules" prop="stores">
            <el-input v-model="form.stores" style="width: 300px;" />
        </el-form-item>
        <el-form-item label="库存预警" prop="storeAlertNum">
            <el-input v-model="form.storeAlertNum" style="width: 300px;" />
            <span style="color: orange;margin-left: 15px;"> 库存低于该数量系统告警</span>
        </el-form-item>
        <el-form-item label="无库存" prop="stores0Unsale">
            <el-checkbox-group v-model="form.stores0Unsale">
                <el-checkbox label="0" name="type">自动下架</el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item label="商品重量" prop="weight">
            <el-input v-model="form.weight" style="width: 300px;">
                <template #append>kg</template>
            </el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">确定</el-button>
            <el-button>返回</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue"
import { uploadFile } from "../api/index.js";
import { shopList } from "../api/goods"
import { goodsCateList } from "../api/goodsCate"
import { goodsListAdd } from "../api/goods"
import Tinymce from "../views/Tinymce.vue"
import { useRouter} from "vue-router";
import { ElMessage } from "element-plus"

let router = useRouter()

let form = reactive({
    shopId: "",//  所属门店	
    categoryId: "",//  商品分类	
    barCode: "",// 商品条码	
    name: "",// 商品名称	
    subName: "",// 别名	
    type: "0",//商品类型	0实物商品 / 1虚拟商品
    overseas: "false",//	海外直邮	true支持/ false不支持
    tags: "",// 标签(关键词)
    purchaseNotes: "",// 购买须知	
    characteristic: "",// 商品特色
    logisticsId: "",//  选择物流模板	
    maxCoupons: "1",// 优惠券	
    paixu: "0",// 排序	
    recommendStatus: "0",//  是否推荐	0不推荐 / 1推荐
    hidden: "0",//是否展示		0正常展示 / 1默认隐藏，不在前端显示
    afterSale1: [0, 1, 2],//是否售后		0仅退款 / 1退款退货 / 2换货
    status: "0",//上架状态		0上架 / 1下架
    videoId: "",//商品视频编号
    pics: "",//图片
    content: "",//详情介绍	
    unit: "份",//单位
    originalPrice: "0",// 市场价		
    minPrice: "0",// 现价	
    minScore: "0",// 需要积分	
    gotScore: "0",// 赠送积分	
    minBuyNumber: "1",// 最少购买	
    stores: "0",// 库存	
    storeAlertNum: "",//库存预警	
    stores0Unsale: [],// 无库存	
    weight: "",// 商品重量	
    detailsJsonStr: "",//商品规格	
})

let rules = ref([
    {
        message: "不能为空",
        required: true
    }
])

// 上传图片
function handleChange(val) {
    // console.log(val)
    const formData = new FormData();

    formData.append("upfile", val.raw)
    uploadFile(formData).then(res => {
        // console.log(res)
        form.pics = res.data.url
    })
}

// 提交按钮
let addForm = ref()
function onSubmit() {
    addForm.value.validate(val => {
        console.log(val)
        form["afterSale"] = form.afterSale1.toString()
        if (val) {
            goodsListAdd(form).then((res) => {
                console.log(res)
                if (res.code === 0) {
                    ElMessage({
                        type: "success",
                        message: "添加成功",
                    });
                }
            });
            router.push("/merchant")
        }
    })
}
// 获取商店列表
let shop = ref([])
function getShops() {
    shopList().then(res => {
        // console.log(res)
        if (res.code === 0) {
            shop.value = res.data.result
        }
    })
}

// 获取商品分类
let goods = ref([])
function getGoodsList() {
    goodsCateList().then(res => {
        if (res.code === 0) {
            goods.value = res.data
        }
    })
}

onMounted(() => {
    getShops()
    getGoodsList()
})


</script>